<template>
  <div class="more">
    <!-- shopinfo.info && shopinfo.info.poi_back_pic_url 这是为了防止组件初次渲染时shopinfo是空对象,导致的报错 -->
    <!-- <div class="top" :style="{backgroundImage:`url(${shoplist.info&& shoplist.info.poi_back_pic_url})`}">
        <img class="tou" :src="shoplist.info&& shoplist.info.picUrl" alt="">
      </div> -->
    <van-nav-bar
      title="详情"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
    />

    <div
      class="shop-head"
      :style="{
        backgroundImage: `url(${
          shoplist.info && shoplist.info.poi_back_pic_url
        })`,
      }"
    >
      <img class="logo" v-lazy="shoplist.info && shoplist.info.picUrl" />
      <span class="name">{{ shoplist.info && shoplist.info.name }}</span>
      <van-icon
        @click="collect()"
        name="like"
        :color="this.status == true ? 'red' : '#ffffff'"
        size="20"
      />
    </div>

    <!-- <div class="top">
      <input type="text" placeholder="搜索" />
      <p
        @click="handle(index)"
        v-for="(item, index) in matches"
        :key="index"
        :class="{ match: true, active: currentIndex == index }"
      >
        {{ item }}
      </p> -->
    <!-- <div class="doc">{{this.$route.params.id}}</div> -->
    <!-- </div> -->
    <div class="center">
      <!-- <div class="left"> -->
      <!-- 分类列表 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          @click="cerrent = index"
          class="cate"
          v-for="(item, index) in shoplist.taglist"
          :key="index"
          :title="item.name"
        />
        <!-- <van-sidebar-item title="标签名称" /> -->
        <!-- <van-sidebar-item title="标签名称" /> -->
      </van-sidebar>

      <!-- <div
          @click="cerrent = index"
          class="cate"
          v-for="(item, index) in shoplist.taglist"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div> -->
      <div class="right">
        <!-- 商品列表 -->
        <div
          class="good"
          v-for="(item, index) in shoplist.taglist &&
          shoplist.taglist[cerrent].goodlist"
          :key="index"
        >
          <!-- <div class="img-box">
            <img :src="item.picture" alt="" />
          </div>
          <div class="text">
            <div class="name">{{ item.name }}</div>
            <div class="price">{{ item.min_price }}</div>
          </div>-->
          <!-- <van-card
            :price="item.min_price"

            :title="item.name"
            :thumb="item.picture"
          /> -->
          <van-card
            :price="item.min_price"
            :title="item.name"
            :thumb="item.picture"
          >
            <template #footer>
              <van-icon
                name="add"
                color="blue"
                size="20"
                @click="onClickButton(index)"
              />
            </template>
          </van-card>
        </div>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="onClickIcon"
        :badge="counts"
      />
      <van-goods-action-button
        color="#be99ff"
        type="warning"
        :text="`总计：${prices}`"
      />
      <van-goods-action-button type="danger" text="去结算" />
    </van-goods-action>
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    <van-popup v-model="show" position="bottom">
      <div class="clear" @click="OnclickClear()">清空</div>
      <div class="tano" v-for="(item, index) in shopgoods" :key="index">
        <img :src="item.picture" alt="" class="mogo" />
        <div class="nav">
          <div class="na">{{ item.name }}</div>
          <div class="xia">
            <div class="qian">
              总价：￥{{ Math.round(item.count * item.min_price) }}
            </div>
            <div class="you">
              <van-icon
                name="plus"
                color="blue"
                @click="onclickJia(index) "
              />
              <span class="count">{{ item.count }}</span>
              <van-icon name="minus" color="blue" @click="onClickJan(index)" />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  shop_shopinfo,
  shop_fav,
  shop_unfav,
  shopcart_list,
  shopcart_clear,
  shopcart_add,
  shopcart_sub,
} from "../api";
import { Toast, Dialog } from "vant";
export default {
  data() {
    return {
      shoplist: [], //! 商家的内容
      matches: ["点餐", "评价", "商家"],
      currentIndex: 0,
      cerrent: 0,
      activeKey: 0, //! 分类列表的下标
      status: false,
      show: false,
      goodid: [],
      curIndex: 0, //! 商品在分类列表的下标
      shopgoods: [], //! 购物车列表的内容
      count: 0,
      price: 0,
      findIndex: 0,
    };
  },
  mounted() {
    var userId = JSON.parse(localStorage.getItem("userinfo")).id;
    shop_shopinfo({ id: this.$route.params.id }).then((res) => {
      //! 店铺详情
      if (res.data.code == 200) {
        // console.log(res.data.shopinfo.taglist[0].goodlist[0].id);
        // this.goodid = res.data.shopinfo.taglist;
        // console.log(this.goodid);
        this.shoplist = res.data.shopinfo;
        // console.log(this.shoplist);
      } else {
        Dialog({ message: res.data.msg }).then((res) => {
          if (res == "confirm") {
            //确认按钮
            this.$router.go(-1);
          }
        });
      }
    });
    shopcart_list({ userid: userId }).then((res) => {
      //! 购物车列表
      console.log(res.data.list);
      return (this.shopgoods = res.data.list); //! 购物车列表的内容
    });
  },
  methods: {
    handle(index) {
      this.currentIndex = index;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    collect() {
      var userId = JSON.parse(localStorage.getItem("userinfo")).id;
      this.status = !this.status;
      if (this.status == true) {
        shop_fav({ userid: userId, shopid: this.$route.params.id }).then(
          //! 收藏店铺
          (res) => {
            console.log(res.data);
            Toast.success("收藏成功");
            // console.log(this.shoplist.mtWmPoiId);
            this.$store.commit("add", this.shoplist.mtWmPoiId);
          }
        );
      } else {
        shop_unfav({ userid: userId, shopid: this.$route.params.id }).then(
          //! 取消收藏
          (res) => {
            console.log(res.data); //! 商家的id
            Toast.success("取消收藏");
            this.$store.commit("getId", this.shoplist.mtWmPoiId);
          }
        );
      }
    },
    onClickIcon() {
      // Toast("点击图标");
      this.show = true;
    },
    onClickButton(index) {
      var userId = JSON.parse(localStorage.getItem("userinfo")).id;
      Toast("点击按钮");
      this.curIndex = index;
      this.shopindex =
        this.shoplist.taglist[this.activeKey].goodlist[this.curIndex].id;
      console.log(this.shopindex);
      //! 如果商品下标是-1 往shopgoods里加入id
      // if (this.shopgoods.indexOf(this.shopindex) == -1) {
      //   this.shopgoods.push(this.shopindex);
      //   console.log(this.shopgoods);
      shopcart_add({ userid: userId, goodid: this.shopindex }).then((res) => {
        //! 数量加一

        console.log(res.data);
      });
    },
    onClickJan(index) {
      var userId = JSON.parse(localStorage.getItem("userinfo")).id;
      Toast("点击按钮");
      this.findIndex = this.shopgoods[index].id;
      console.log(this.findIndex);
      //! 如果商品下标是-1 往shopgoods里加入id
      // if (this.shopgoods.indexOf(this.shopindex) == -1) {
      //   this.shopgoods.push(this.shopindex);
      //   console.log(this.shopgoods);
      shopcart_sub({ userid: userId, goodid: this.findIndex }).then((res) => {
        //! 数量减一
        console.log(res.data);
      });
    },
    onclickJia(index) {
      var userId = JSON.parse(localStorage.getItem("userinfo")).id;
      Toast("点击按钮");
      this.findIndex = this.shopgoods[index].id;
      console.log(this.findIndex);
      shopcart_add({ userid: userId, goodid: this.findIndex }).then((res) => {
        //! 数量加一
        console.log(res.data);
      });
    },
    OnclickClear() {
      var userId = JSON.parse(localStorage.getItem("userinfo")).id;
      shopcart_clear({ userid: userId }).then((res) => {
        console.log(res.data);
      });
    },
  },
  computed: {
    counts() {
      this.shopgoods.forEach((item) => {
        this.count += item.count;
        // console.log(item.count);
      });
      return this.count;
    },
    prices() {
      this.shopgoods.forEach((item) => {
        this.price += item.count * item.min_price;
      });
      return Math.round(this.price);
    },
  },
};
</script>

<style scoped>
.shop-head {
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 50px 20px;
}
.shop-head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.shop-head .name {
  color: white;
  font-size: 18px;
}
.more {
  width: 100%;
  height: 100%;
  /* background-color: aquamarine; */
}
.top {
  width: 100%;
  height: 100px;
  background-color: azure;
  overflow: hidden;
  display: flex;
}
input {
  width: 70px;
  height: 30px;
  display: block;
  outline: none;
  border-radius: 10px;
  border: none;
  text-align: center;
  line-height: 30px;
  margin-top: 20px;
  margin-left: 20px;
  border: 1px solid palegoldenrod;
}
.match {
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-top: 20px;
}
.active {
  color: blue;
  border-bottom: 1px solid blueviolet;
}
.center {
  width: 100%;
  height: 420px;
  display: flex;
  overflow: auto;
}
.van-sidebar {
  height: 420px;
}
.left {
  width: 150px;
  /* background-color: aqua; */
  /* height: 100%; */
  /* height: 30px; */
}
.cate {
  margin-top: 10px;
  height: 50px;
}
.right {
  flex: 1;
  overflow: auto;
}
.good {
  display: flex;
  height: 150px;
  width: 100%;
  margin-top: 10px;
}
.img-box {
  width: 50px;
  height: 50px;
}
.logo {
  width: 50px;
  height: 50px;
}
.van-sidebar {
  width: 140px;
  background-color: white;
}
.van-card {
  width: 200px;
  background-color: white;
}
.tano {
  height: 100px;
  width: 100%;
  display: flex;
}
.nav {
  flex: 1;
}
.mogo {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.xia {
  display: flex;
  justify-content: space-between;
}
.clear {
  margin-left: 300px;
}
</style>